<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>带选择框的树</title>
	<script type="text/javascript">
		var Global = {
			contextPath:'/bingo.ui.framework'
		} 
	</script>
	<script src="../../../../scripts/jquery.js" type="text/javascript"></script>
	<script src="../../../../scripts/jquery.utils.js" type="text/javascript"></script>
	
	<link  href="../../../../themes/default/ui.css" type="text/css" id="themesLink" rel="stylesheet" />
	
	<script src="../ui.tree.js" type="text/javascript"></script>
	<link  href="../ui.tree.css" rel="stylesheet" type="text/css" />

	<link type="text/css" href="../../../demos.css" rel="stylesheet" />
	<script src="../../../../scripts/jquery_plugins/jquery.json.js" type="text/javascript"></script>
	<!-- 换肤 -->
	<script type="text/javascript" src="../../../theme_cookie.js"></script>
	<style>
		.tree{
			width:200px;
		}
		
		button{
			width:150px;
			font-size: 80%;
		}
		
		.ns{
			font-size:80%;
		}
	</style>

	<script>
		$(function(){
			var data = {
				id:'11',
				text:'根节点',
				isExpand:true,
				childNodes:[
					{
						id:'21',
						text:'数据源表11',
						showCheck:true, //默认为true
						childNodes:[
							{
								id:'ss',
								text:'搜索',
								disabled:true,
								childNodes:[
									{
										id:'baidu',
										disabled:true,
										text:'百度'
									},
									{
										id:'google',
										text:'谷歌'
									}
								]
							}
						]
					},
					{
						id:'31',
						text:'数据源表二1',
						complete:false //表示需要异步加载
					}
				]
			 };

			var rootPath = window.location.href.substring(0,window.location.href.lastIndexOf("\/") + 1);
			
			$('#event-tree').tree({//tree为容器ID
            	method		:	'post',
            	asyn		:	true, //异步
            	url			:	rootPath + 'data.html',
            	dataProxy	:	{type:'data',value:data},//获取数据方式
            	showCheck	:	true, //是否显示checkbox框 , 默认所有节点出现选择框
            	cascadeCheck:true //级联选择，UP向上级联 DOWN向下级联 false不级联 true向上向下级联
            }) ;

            $('.getSelectedIds').click( function(){
            	var vals = $('#event-tree').tree().getSelectedIds()  ;
				$('.value').html('选中值：<br/>'+vals) ;
            } ) ;

            $('.getSelectNodes').click( function(){
            	var vals = $('#event-tree').tree().getSelectNodes()  ;
				$('.value').html('选中节点：<br/>'+ $.json.encode( vals ) ) ;
            } ) ;

            $('input[type=radio]').click( function(){
            	$('#event-tree').tree().checkAll(0) ;//全部取消选择
				var val = this.value ;
				switch( val ){
					case 'true':
						val = true ;
						break;
					case 'false':
						val = false ;
						break ;
					default:
						break;
				}

				$('#event-tree').tree().treeOption( 'cascadeCheck', val) ;
            } ) ;

             $('.checkNode').click(function(){
            	var vals = $('#event-tree').tree().getCurrentNode()  ;
            	if(vals == undefined || vals == null || vals.id == undefined){
            		alert('请先点击要勾选的节点，再点击勾选节点按钮。');
            	}else{
            		$('#event-tree').tree().checkNode(vals.id,true) ;	
            	}
            }) ;
            
            $('.unCheckNode').click(function(){
            	var vals = $('#event-tree').tree().getCurrentNode()  ;
            	if(vals == undefined || vals == null || vals.id == undefined){
            		alert('请先点击要勾掉的节点，再点击勾掉节点按钮。');
            	}else{
            		$('#event-tree').tree().checkNode(vals.id,false) ;	
            	}
            }) ;
            
            $('.disableNode').click(function(){
            	var vals = $('#event-tree').tree().getCurrentNode()  ;
            	if(vals == undefined || vals == null || vals.id == undefined){
            		alert('请先点击要Disabled的节点，再点击Disabled节点按钮。');
            	}else{
            		$('#event-tree').tree().disableNode(vals.id,true) ;	
            	}
            }) ;
            

		}) ;
	</script>
	
</head>

<body>
   <div style="float:left;width:220px;">
   	
   	<b>节点选择方式：</b><br/>
	<div class="ns">
	<input type="radio" value='true' name="ns" checked="checked"/>上下
	<input type="radio" value='UP' name="ns"/>上
	<input type="radio" value='DOWN' name="ns"/>下
	<input type="radio" value='false' name="ns"/>无
	</div>
	<hr/>
   	
	<button class='getSelectedIds'>获取所有勾选节点ID值</button> <br/>
	<button class='getSelectNodes'>获取所有勾选节点对象</button><br/>
	
	<hr/>
	
	<button class='checkNode'>勾选指定节点</button><br/>
	<button class='unCheckNode'>勾掉指定节点</button><br/>
	<button class='disableNode'>Disabled指定节点</button><br/>
	
	<br>
   </div>
	
	<div id='content-event' class='demo' style="float:left">
		
		<div id="event-tree" class="tree"></div>
		<br />
		<div class="ui-state-highlight value" style="width:300px;"></div>
		
	</div>
</body>
</html>